import { useEffect, useRef, useState } from "react";
// 导出 useTop事件方法   dis: 距离
export function useTop(dis = 100) {
  // 创建一个节点
  const elem = useRef();
  //   定义当前滚动距离
  const [top, setTop] = useState(0);
  //   回到顶点事件
  function goTop() {
    window.scrollTo({
      top: 0,
      behavior: "smooth"
    });
  }
  // 隐藏事件
  function onScroll() {
    // 获取窗口滚定距离
    var scrollTo = document.documentElement.scrollTop;
    // 更新top
    setTop(scrollTo);
    if (scrollTo < dis) {
      // 隐藏
      elem.current.style.display = "none";
    } else {
      // 显示
      elem.current.style.display = "block";
    }
  }
  useEffect(() => {
    // 添加点击事件
    elem.current.addEventListener("click", goTop);
    // 默认检查一次
    onScroll();
    // 添加监听滚动事件
    window.addEventListener("scroll", onScroll);
    // 移除事件
    return () => {
      // 移除监听滚动事件
      window.removeEventListener("scroll", onScroll);
      // 移除点击事件
      elem.current.removeEventListener("click", goTop);
    };
  }, []);
  // 返回节点
  return [elem, top];
}
